<template>
	<div class="common-layout">
		<el-container class="full-layout">
			<el-header class="header">
				<TopNav />
			</el-header>
			<el-main class="main">
				<RouterView></RouterView>
			</el-main>
			<el-footer class="footer">
				<FooterIcons />
			</el-footer>
		</el-container>
	</div>


</template>

<script>
	import {
		RouterView
	} from 'vue-router'
	import TopNav from '@/components/TopNav.vue'
	import Main from '@/components/Main.vue'
	import FooterIcons from '@/components/FooterIcons.vue'

	export default {
		components: {
			TopNav,
			Main,
			FooterIcons,
		},
		mounted() {
			// 如果当前路径正好是 /overview，则重定向到默认子页面
			if (this.$route.path === '/') {
				this.$router.replace('/first')
			}
		}
	}
</script>

<style scoped>
	.common-layout {
		/* height: 100vh; */
		min-height: 100vh;
		width: 100%;
		overflow-x: hidden;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
	}

	.full-layout {
		flex: 1;
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
	}



	/* 顶部导航栏样式 */
	.header {
		flex-shrink: 0;
		width: 100%;
		height: 100px;
		padding:0;

	}

	/* 主内容区样式 */
	.main {
		width: 100%;

		padding: 10px 0;
		flex: 1;
		background: #ffffff;
	}

	.footer {

		width: 100%;
		background: #333;
		/* 示例背景色 */

	}
</style>
